---
import DownloadPopup from "../DownloadPopup.astro";
import Loader from "../Loader.astro";
import ShareIcons from "../ShareIcons.astro";
import SubscribePopup from "../SubscribePopup.astro";
import TopicOverlay from "../TopicOverlay.astro";
import "./InteractiveRoadmap.css";

export interface Props {
  roadmapId: string;
  description: string;
  jsonUrl: string;
  dimensions?: {
    width: number;
    height: number;
  };
}

const { roadmapId, jsonUrl, dimensions = null, description } =
  Astro.props;
---

<link
  rel="preload"
  href="/fonts/balsamiq.woff2"
  as="font"
  type="font/woff2"
  crossorigin
  slot="after-header"
/>

<div class="bg-gray-50 py-4 sm:py-12">
  <div class="max-w-[1000px] container relative">
    <ShareIcons
      description={description}
      pageUrl={`https://roadmap.sh/${roadmapId}`}
    />
    <DownloadPopup />
    <SubscribePopup />
    <TopicOverlay />
    <div
      id="roadmap-svg"
      style={dimensions ? `--aspect-ratio:${dimensions.width}/${dimensions.height}` : null}
      data-roadmap-id={roadmapId}
      data-json-url={jsonUrl}
    >
      <Loader />
    </div>
  </div>
</div>

<script src="./roadmap.js"></script>
